﻿@model List<LAPI.Data.Model.Reserva>
@{
    Layout = null;
}
<div class="modal-header">
    <button class="close" data-dismiss="modal">x</button>
        <h3>Realizar reserva</h3>
</div>
    <div class="modal-body">
        <form id="formReserva" name="formReserva" class="form-horizontal">

            <div class="control-group">
            <label for="horaInicio" class="control-label">Hora comienzo:</label>
            <div class="controls">
                <input type="text" class="span3" id="horaInicio" name="horaInicio" readonly value="@ViewBag.horaInicio"/>
            </div>

            <div class="control-group">
            <label for="horaFin" class="control-label">Hora fin:</label>
            <div class="controls">
                <input type="text" class="span3" id="horaFin" name="horaFin" readonly value="@ViewBag.horaFin"/>
            </div>

            <div class="control-group">
            <label for="deporteReserva" class="control-label">Actividad:</label>
            <div class="controls">
                <input type="text" class="span3" id="deporteReserva" name="deporteReserva" disabled value="@ViewBag.deporteReserva"/>
            </div>

            <div class="control-group">
            <label for="pistaReserva" class="control-label">Pista:</label>
            <div class="controls">
                <input type="text" class="span3" id="pistaReserva" name="pistaReserva" disabled value="@ViewBag.pistaReserva"/>
            </div>
                
            <div class="control-group">
            <label for="centroReserva" class="control-label">Centro:</label>
            <div class="controls">
                <input type="text" class="span3" id="centroReserva" name="centroReserva" disabled value="@ViewBag.centroReserva"/>
            </div>

            <div class="control-group" style="@(ViewBag.luz ? "" : "display:none;")">
            <label for="luzSel" class="control-label">¿Desea disponer de luz artificial?:</label>
            <div class="controls">
                <input type="checkbox" id="luzSel" name="luzSel" onchange='handleChange(this);' />
            </div>
            </div>

            <div class="pull-right">
            Importe total:<span id="precio">@ViewBag.importe €</span>
            </div>
            <input type="hidden" id="deporteSel" name="deporteSel" value="@ViewBag.deporteSel"/>
            <input type="hidden" id="pistaSel" name="pistaSel" value="@ViewBag.pistaSel"/>
            <input type="hidden" id="centroSel" name="centroSel" value="@ViewBag.centroSel"/>

            <input type="hidden" id="importe" name="importe" value="@ViewBag.importe"/>
            <input type="hidden" id="suplemento" name="suplemento" value="@ViewBag.suplemento"/>
            <input type="hidden" id="luz" name="luz" value="@ViewBag.luz"/>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-primary" onclick="closeReserva();">Ups! yo no quería...</a>
        <a href="#" class="btn btn-success" onclick="confirmarReserva();">Confirmar</a>            
    </div>
    
    <script type="text/javascript">
        function handleChange(cb) {
            if (cb.checked) {
                var importe = Number(document.getElementById("importe").value.replace(',','.'));
                var suplemento = Number(document.getElementById("suplemento").value.replace(',', '.'));
                document.getElementById("importe").value = importe + suplemento;
                document.getElementById("precio").innerHTML = (importe + suplemento) + " €";
            } else {
                var importe = Number(document.getElementById("importe").value.replace(',', '.'));
                var suplemento = Number(document.getElementById("suplemento").value.replace(',', '.'));
                document.getElementById("importe").value = importe - suplemento;
                document.getElementById("precio").innerHTML = (importe - suplemento) + " €";
            }
        }
    </script>